<template>
  <div
    v-if="visible">

    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="企业权益">

      <a-list size="large">
        <a-list-item :key="index" v-for="(item, index) in qyList">
          <div slot="actions">
            <a @click="showWxCode">购买</a>
          </div>
          <div class="list-content">
            <!--<div class="list-content-item">
              <p>{{ item.description }}</p>
            </div>-->
            <div class="list-content-item">
              <p>{{ item.description }}</p>
              <a-progress :percent="item.progress.value" :status="!item.progress.status ? null : item.progress.status" style="width: 1000px" />
            </div>
          </div>
        </a-list-item>
      </a-list>
      <show-wx-form ref="showForm"></show-wx-form>
    </a-card>
  </div>


</template>

<script>
  import { getAction} from '@/api/manage'
  import ShowWxForm from '../qy/company/modules/ShowWxForm'
  export default {
    name: "Account",
    components: {
      ShowWxForm
    },
    data () {
      return {
        qyList:[],
        visible:false
      }
    },
  created() {
    this.loadAccount();
  },
    methods: {
      loadAccount(){
        getAction("/qy/qyAccount/getCompanyAccountInfo",{}).then((res)=>{
          if(res.success){
            if(res.result){
              let accout = res.result.account;
              if(accout){
                this.visible = true;
                let commodityList = res.result.commodityList;
                let muchNum = res.result.muchNum;
                let oneNum = res.result.oneNum;

                this.qyList.push({
                  description: '一物一码商品创建数量：'+oneNum+"/"+(oneNum+parseInt(accout.commoditySurplusNum))+"(消耗/累积)",
                  progress: {
                    value: oneNum/(oneNum+parseInt(accout.commoditySurplusNum))*100
                  }
                });

                this.qyList.push({
                  description: 'N物一码商品创建数量：'+muchNum+"/"+(muchNum+parseInt(accout.muchCommoditySurplusNum))+"(消耗/累积)",
                  progress: {
                    value: muchNum/(muchNum+parseInt(accout.muchCommoditySurplusNum))*100
                  }
                });

                if(commodityList){
                  for(var k in commodityList){
                    let cl = commodityList[k];
                    let cf = cl.commodityType==1?(cl.oneCodeTotalNum-cl.oneCodeNum)+"/"+cl.oneCodeTotalNum:(cl.muchCodeTotalNum-cl.muchCodeNum)+"/"+cl.muchCodeTotalNum;
                    var bl = cl.commodityType==1?(cl.oneCodeTotalNum-cl.oneCodeNum)/cl.oneCodeTotalNum:(cl.muchCodeTotalNum-cl.muchCodeNum)/cl.muchCodeTotalNum;
                    this.qyList.push({
                      description: cl.commodityName+" | 电子码数量："+cf,
                      progress: {
                        value: bl*100
                      }
                    });
                  }
                }
              }
            }
          }
        });
      },showWxCode(){
        this.$refs.showForm.showWx("购买","添加专属客服，提交您的购买需求");
      }
    }
  }
</script>

<style lang="less" scoped>
    .ant-avatar-lg {
        width: 48px;
        height: 48px;
        line-height: 48px;
    }

    .list-content-item {
        color: rgba(0, 0, 0, .45);
        display: inline-block;
        vertical-align: middle;
        font-size: 14px;
        margin-left: 40px;
        span {
            line-height: 20px;
        }
        p {
            margin-top: 4px;
            margin-bottom: 0;
            line-height: 22px;
        }
    }
</style>